import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Space, Button, Form, Input, Badge, message, Drawer, Tabs, Modal, InputNumber, Checkbox } from 'antd';
import { connect } from 'umi';
import MyDataTable from '@/components/MyDataTable';
import {
    EmpSelect,
} from '@/components/FormItemSelect';
import request from '@/utils/request';
import moment from 'moment';

const { TabPane } = Tabs;
const apiURL = '/api/services/app/JobMtl/';
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            params: {},
            freshNum: 0,
            freshNum2: 0,
            pageSize: 10,
            record: [],
            record2: [],
            message: '',
            empName: '',
            visible2: false
        };
    }
    doubleClick = (record: any) => {
        console.log(record);
    }
    setRowSelection = (items: any) => {
        this.setState({ record: items });
    }
    setRowSelection2 = (items: any) => {
        this.setState({ record2: items });
    }
    formRef: any = React.createRef();
    formRef2: any = React.createRef();
    onFinish = (values: any) => {
        const { freshNum, freshNum2, actTab } = this.state
        if (actTab === "1") {
            this.setState({ params: values, freshNum: freshNum + 1 })
        } else {
            this.setState({ params2: values, freshNum2: freshNum2 + 1 })
        }
    }
    onFinish2 = () => {
        var obj = this.formRef2.current.getFieldsValue();
        this.setState({ record2: [obj] }, () => {
            this.returnMtl()
        })
    }
    resetForm = () => {
        this.formRef.current.resetFields();
    }
    issueMtl = () => {
        const { record, freshNum, empName } = this.state;
        if (record.length <= 0) {
            message.warning('请至少选择一条记录')
            return;
        }
        if (!empName || empName === '') {
            message.warning('请选择员工')
            return;
        }
        var data: any = []
        record.forEach((element: any) => {
            data.push({
                jobNum: element.jobNum,
                asmSeq: element.assemblySeq,
                mtlSeq: element.mtlSeq,
                issueQty: element.pickQty,
                pickNum: element.pickNum,
                EmpID: empName
            })
        });
        request(apiURL + 'IssueMtl', {
            method: 'POST',
            data,
        }).then((response) => {
            if (response && response.success) {
                message.success('发料成功')
            }
            this.setState({ loading: false, freshNum: freshNum + 1 });
        });
    }
    returnMtl = () => {
        const { record2, freshNum2 } = this.state;
        if (record2.length <= 0) {
            message.warning('请至少选择一条记录')
            return;
        }
        var data: any = []
        record2.forEach((element: any) => {
            data.push({
                id: element.id,
                jobNum: element.jobNum,
                asmSeq: element.assemblySeq,
                mtlSeq: element.jobSeq,
                returnQty: element.tranQty,
                whseCode: element.wareHouseCode,
                binNum: element.binNum,
                lotNum: element.lotNum,
                pickNum: element.tranReference,
                EmpID: element.empID,
                insp: element.insp
            })
        });
        request(apiURL + 'ReturnMtl', {
            method: 'POST',
            data,
        }).then((response) => {
            if (response && response.success) {
                message.success('退料成功')
            }
            this.setState({ loading: false, freshNum2: freshNum2 + 1 });
        });
    }
    switchDraw = () => {
        const { visible } = this.state
        this.setState({ visible: !visible })
    }
    switchModal = (record?: any) => {
        const { visible2 } = this.state
        this.setState({ visible2: !visible2 }, () => {
            if (record) {
                record.insp = true;
                this.formRef2.current.setFieldsValue(record)
            }
        });
    }
    setEmp = (val: any) => {
        this.setState({ empName: val })
    }
    tabChange = (key: any) => {
        this.setState({ actTab: key })
    }
    render() {
        const columns = [
            {
                title: '领料单号',
                dataIndex: 'pickNum',
                width: 100,
            },
            {
                title: '工单号',
                dataIndex: 'jobNum',
                width: 80,
            },
            {
                title: '半成品号',
                dataIndex: 'assemblySeq',
                width: 65
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
                width: 90,
                render: (text: any, record: any) => <span>{text} {record.issuedComplete ? <Badge status="success" /> : ''}</span>
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
                ellipsis: true,
                width: 220
            },
            {
                title: '领料数量',
                dataIndex: 'pickQty',
                align: 'center',
                width: 65
            },
            {
                title: '发料时间',
                dataIndex: 'issueTime',
                width: 105,
                render: (text: any) => text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : ''
            },
            {
                title: '发料人',
                dataIndex: 'issueUser',
                width: 100
            },
            {
                title: '领料人',
                dataIndex: 'pickUser',
                width: 100
            },
        ];
        const columns2 = [
            {
                title: '领料单号',
                dataIndex: 'tranReference',
                width: 100,
            },
            {
                title: '工单号',
                dataIndex: 'jobNum',
                width: 80,
            },
            {
                title: '半成品号',
                dataIndex: 'assemblySeq',
                width: 65
            },
            {
                title: '物料编码',
                dataIndex: 'partNum',
                width: 90,
            },
            {
                title: '描述',
                dataIndex: 'partDescription',
                ellipsis: true,
                width: 220
            },
            {
                title: '发料数量',
                dataIndex: 'tranQty',
                align: 'center',
                width: 65
            },
            {
                title: '仓库',
                dataIndex: 'wareHouseCode',
                align: 'center',
                width: 65
            },
            {
                title: '库位',
                dataIndex: 'binNum',
                align: 'center',
                width: 65
            },
            {
                title: '批次',
                dataIndex: 'lotNum',
                align: 'center',
                width: 65
            },
            {
                title: '发料时间',
                dataIndex: 'creationTime',
                width: 105,
                render: (text: any) => text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : ''
            },
            {
                title: '领料人',
                dataIndex: 'empID',
                width: 100
            },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 100,
                render: (_: any, record: any) => (
                    <>
                        <Button
                            size="small"
                            type="ghost"
                            danger
                            title="退料"
                            onClick={() => this.switchModal(record)}
                        >
                            退料
                        </Button>
                    </>
                ),
            },
        ];
        const params = this.state.params;
        params.isComp = 0;
        const params2 = {
            tranType: 'STK_MTL',
            desc: true,
            ...this.state.params2
        }
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const layout2 = {
            labelCol: { span: 7 },
            wrapperCol: { span: 17 },
        };
        return (
            <PageHeaderWrapper title={false}>
                <Card title="发料退料" extra={

                    <Form layout="inline">
                        <EmpSelect
                            showSearch
                            width={100}
                            name='userId'
                            label="员工"
                            onChange={this.setEmp}
                        />
                        <Form.Item>
                            <Space key="S1">
                                <Button type="primary" onClick={() => this.issueMtl()}>发料</Button>
                                <Button type="default" danger onClick={() => this.returnMtl()}>退料</Button>
                                <Button type="default" onClick={this.switchDraw}>搜索</Button>
                            </Space>
                        </Form.Item>
                    </Form>

                }>
                    <Tabs defaultActiveKey="1" onChange={this.tabChange}>
                        <TabPane tab="申领记录" key="1">
                            <MyDataTable
                                act="GetIssueMtl"
                                columns={columns}
                                freshNum={this.state.freshNum}
                                pageSize={this.state.pageSize}
                                control="JobMtl"
                                doubleClick={this.doubleClick}
                                rowSelection={(items: any) => this.setRowSelection(items)}
                                params={params}>
                            </MyDataTable>
                        </TabPane>
                        <TabPane tab="发料记录" key="2">
                            <MyDataTable
                                act="GetReturnMtl"
                                columns={columns2}
                                freshNum={this.state.freshNum2}
                                pageSize={this.state.pageSize}
                                control="PartTran"
                                doubleClick={this.doubleClick}
                                rowSelection={(items: any) => this.setRowSelection2(items)}
                                params={params2}>
                            </MyDataTable>
                        </TabPane>
                    </Tabs>

                </Card>
                <Drawer
                    title="高级搜索"
                    width={400}
                    placement="right"
                    closable={false}
                    visible={this.state.visible}
                    onClose={this.switchDraw}
                    mask={true}
                    maskClosable={true}
                    footer={<Button type="primary" onClick={this.switchDraw}> 关闭 </Button>}
                >
                    <Form
                        {...layout}
                        ref={this.formRef}
                        onFinish={this.onFinish}
                    >
                        <Form.Item label="工单号" name="jobNum">
                            <Input />
                        </Form.Item>
                        <Form.Item label="物料编码" name="keywords">
                            <Input />
                        </Form.Item>
                        <Form.Item label="领料单号" name="pickNum">
                            <Input />
                        </Form.Item>
                        <EmpSelect
                            showSearch
                            name='user'
                            label="领料人"
                        />
                        <Form.Item wrapperCol={{ offset: 5 }}>
                            <Space>
                                <Button type="primary" htmlType="submit">查找</Button>
                                <Button type="default" onClick={this.resetForm}>重置</Button>
                            </Space>
                        </Form.Item>
                    </Form>

                </Drawer>
                <Modal
                    title="退料"
                    visible={this.state.visible2}
                    destroyOnClose={false}
                    footer={null}
                    onCancel={() => this.switchModal()}

                >
                    <Form
                        {...layout2}
                        ref={this.formRef2}
                        onFinish={this.onFinish2}
                    >
                        <Form.Item label="ID" name="id" hidden>
                            <Input disabled />
                        </Form.Item>
                        <Form.Item label="领料单号" name="tranReference">
                            <Input disabled />
                        </Form.Item>
                        <Form.Item label="工单号">
                            <Input.Group compact>
                                <Form.Item name="jobNum" noStyle>
                                    <Input style={{ width: 100 }} disabled />
                                </Form.Item>
                                <Form.Item name="assemblySeq" noStyle>
                                    <Input style={{ width: 50 }} disabled />
                                </Form.Item>
                                <Form.Item name="jobSeq" noStyle>
                                    <Input style={{ width: 50 }} disabled />
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item label="物料编码" name="partNum">
                            <Input disabled />
                        </Form.Item>
                        <Form.Item label="物料描述" name="partDescription">
                            <Input disabled />
                        </Form.Item>
                        <Form.Item label="仓库/库位/批次">
                            <Input.Group compact>
                                <Form.Item name="wareHouseCode" noStyle>
                                    <Input placeholder="仓库" style={{ width: 100 }} disabled />
                                </Form.Item>
                                <Form.Item name="binNum" noStyle>
                                    <Input placeholder="库位" style={{ width: 60 }} disabled />
                                </Form.Item>
                                <Form.Item name="lotNum" noStyle>
                                    <Input placeholder="批次" style={{ width: 100 }} disabled />
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                        <Form.Item label="退料人" name="empID">
                            <Input disabled style={{ width: 100 }} />
                        </Form.Item>
                        <Form.Item label="退料数量" name="tranQty">
                            <InputNumber />
                        </Form.Item>
                        <Form.Item name='insp' valuePropName="checked" wrapperCol={{ offset: 7 }}>
                            <Checkbox defaultChecked={false}>需要检验</Checkbox>
                        </Form.Item>
                        <Form.Item wrapperCol={{ offset: 7 }}>
                            <Space>
                                <Button type="primary" htmlType="submit">确定退料</Button>
                            </Space>
                        </Form.Item>
                    </Form>
                </Modal>
            </PageHeaderWrapper>
        )
    }
}
export default connect(({ Abp, user }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: user.currentUser,
}))(ViewPage);